<template>
  <ul class="jm-tabbar">
    <router-link
      v-for="tab in tabs"
      :key="tab.path"
      class="jm-tabbar-item"
      tag="li"
      :to="tab.path"
      active-class="current"
    >
      <i v-html="tab.icon" />
      <span>{{tab.title}}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  props: {
    tabs: Array
  }
}
</script>

<style lang="scss" scoped>
.jm{
  &-tabbar{
    height: 48px;
    display: flex;
    &-item{
      flex: 1;
      text-align: center;
      color: rgb(153, 153, 153);
      &.current{
        color: #f00;
      }
      & > i{
        font-family: iconfont;
        font-size: 20px;
        line-height: 24px;
      }
      & > span{
        display: block;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}
</style>
